<template>
  <div class="card_w_h" @click="goMchtPage">
    <div class="card_heard">
      <p class="mcht">
        <span class="mcht_name">{{mchtInfo.mchtArea}} {{mchtInfo.distance | setDistance}}</span>
        <span class="mcht_location">¥{{mchtInfo.mchtPer}}/人</span>
      </p>
    </div>
    <div class="coupon_detail_wrp">
      <img class="coupon_img" v-lazy="mchtInfo.mchtLogUrl" alt="图片">
      <div class="card-info-detail">
        <strong class="card-info_title">{{mchtInfo.mchtName | sliceString(9)}}</strong>
        <div class="card_info_type">
          <p class="type">
            <span class="type_name">{{mchtInfo.mchtTypeValue}}</span>
            <star :couponComScore="mchtInfo.mchtComScore" class="type_star_left"></star>
            <span class="type_comment">{{mchtInfo.mchtComNum}}条</span>
          </p>
          <!--显示券值多少芸券-->
          <div class="coupon_type_num">
            <a href="javascript:;" class="type_a">
              <span class="coupon_num">{{mchtInfo.denomination ? mchtInfo.denomination.length : 0}}</span> <span class="wen">张券</span>
            </a>
          </div>
        </div>
        <p class="use-info-sold">
          <span>{{mchtInfo.mchtAddr | sliceString(15)}}</span>
          <!--<span class="couponNum">&nbsp;¥80元</span>-->
          <!--<span class="couponNum" v-else>&nbsp;{{couponInfo.denomination}}折</span>-->
        </p>
      </div>
    </div>
    <slot></slot>
  </div>
</template>

<script>
  export default {
    data: () => ({}),
    props: {
      mchtInfo: {
        default: () => {}
      }
    },
    async created() {

    },
    mounted() {
      this.$nextTick(async () => {})
    },
    methods: {
      goMchtPage(){
        this.$router.push({name:"merchDetail",query:{
          mchtId:this.mchtInfo.mchtId,
          noMchtSwiper:(this.$route.query.type?'':true)//有type说明是搜索商户点进去详情，否则首页列表点进去
        }})
      }
    },
    components: {
      star: () => import('src/componentes/global/star.vue')
    }
  }
</script>

<style lang="scss" scoped="">
  .card_w_h {
    background-color: #ffffff;
    padding-bottom: 10px;
    .coupon_detail_wrp {
      display: inline-block;
      position: relative;
      margin-left: 1.2rem;
      padding: 0 0 0.5rem 0;
      width: 92%;
      span.coupon_case {
        position: absolute;
        top: 2rem;
        color: #fefefe;
        border-radius: 2px;
        font-size: 0.625rem;
        text-align: center;
        width: 2.8rem;
        height: 1.25rem;
        line-height: 1.25rem;
        z-index: 99;
      }
    }
    img.coupon_img {
      width: 5rem;
      height: 5rem;
      margin: 0;
    }
    .card_heard {
      width: 100%;
      height: 3.85rem;
      border-radius: 5px;
      p {
        &.mcht {
          line-height: 3.85rem;
          span.mcht_name {
            font-size: 0.9rem;
            margin-left: 1.2rem;
            color: rgb(51,51,51);
          }
          span.mcht_location {
            float: right;
            font-weight: 300;
            font-size: 0.9rem;
            color: #ee3155;
            margin-right: 1.2rem;
          }
        }
      }
    }
    .card-info-detail {
      float: left;
      margin-left: 0.8rem;
      padding-top: 2px;
      .card-info_title {
        float: left;
        font-size: 1.1rem;
        color: #444444;
        white-space: nowrap;
        overflow: hidden;
        margin-top: -0.2rem;
        width: 100%;
      }
      .card_info_type {
        margin: 1.6rem 0 1.05rem 0;
        & .type {
          span.type_name {
            font-size: 0.7rem;
            float: left;
            margin-right: 0.6rem;
            margin-top: 0.2rem;
            color: rgb(153, 153, 153px);
          }
          span.type_star_left {
          }
          span.type_comment {
            font-size: 0.7rem;
            color: rgb(153, 153, 153px);
            margin-left: 0.6rem;
          }
        }
        div.coupon_type_num {
          position: absolute;
          right: -3.5%;
          top: 40%;
          transform: translate(0, -50%);
          -weblit-transform: translate(0, -50%);
          a.type_a {
            background-color: #ffeef4;
            border-radius: 4rem 0 0 4rem;
            padding: 0.2rem 0.5rem 0.2rem 0.75rem;
          }
          span.coupon_num {
            font-size: 1rem;
            font-weight: 300;
            color: #ec4e8a;
          }
          span.wen {
            color: #ec4e8a;
            font-size: 0.6rem;
          }
        }
      }
      .paValue {
        float: left;
        font-size: .8rem;
        line-height: 2rem;
        margin-left: 0.5rem;
        color: #7d7d7d;
        span.sum {
          margin-left: 20px;
          color: #ef3b5d;
        }
      }
      .use-info-sold {
        font-size: 0.7rem;
        width: 15rem;
        span {
          font-size: 0.9rem;
          color: #666666
        }
      }
    }
    .card_foot {
      position: relative;
      top: -0.2rem;
      height: 2.758rem;
      line-height: 2.875rem;
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
      img {
        width: 1.25rem;
        height: 1.25rem;
        margin-left: 1.38rem;
        margin-top: 0.8rem;
      }
      .font {
        position: relative;
        top: -0.2rem;
      }
      div.card_progress_bar {
        position: absolute;
        top: 1rem;
        left: 7rem;
        font-size: 0.8rem;
        .bar {
          width: 8rem;
          height: 0.3125rem;
          border: 1px solid #ffc2cd;
          border-radius: 10px;
          div.bar2 {
            width: 90%;
            height: 0.3rem;
            border-radius: 10px;
            background-color: #ffc2cd;
          }
        }
        span {
          position: relative;
          top: -0.8rem;
          color: #787878;
        }
      }

      button.card_foot_button {
        float: right;
        width: 5.625rem;
        height: 1.875rem;
        border-radius: 5px;
        color: #ffffff;
        margin: 0.5rem 1rem;
        background-color: #ec4e8a;
      }
    }
  }
</style>